<template>
	<view class="app column">
		<view class="search-wrap center" style="margin-top: 40rpx;">
			<view  @click="back"><u-icon name="arrow-left" color="#aa9c9f" size="60"></u-icon></view>
			<view class="input-box row">
				<text class="mix-icon icon-sousuo"></text>
				<input 
					class="input"
					type="text" 
					placeholder="请输入搜索关键字" 
					maxlength="20"
					v-model="keyword" 
					@confirm="search"
					confirm-type="search"
				/>
				<text v-if="keyword" class="mix-icon icon-guanbi2" @click="clearInput"></text>
			</view>
			<view class="search-btn center" @click="search">
				<text>搜索</text>
			</view>
		</view>
		
		<view class="content" v-if="dataList.length <= 0">
			<view v-if="historyList.length > 0" class="s-header row">
				<text class="tit">历史搜索</text>
				<text class="mix-icon icon-lajitong" @click="showPopup('mixModal')"></text>
			</view>
			<view v-if="historyList.length > 0" class="list" style="margin-bottom: 20rpx;">
				<view 
				class="item center" 
				v-for="(item, index) in historyList"  
				@click="search(item)">
					<text>{{ item }}</text>
				</view>
			</view>
			<view v-if="hotList.length > 0" class="s-header row">
				<text class="tit">热门搜索</text>
			</view>
			<view v-if="hotList.length > 0" class="list">
				<view 
				class="item center" 
				v-for="(item, index) in hotList" 
				:key="index" 
				@click="search(item.keyword)">
					<text>{{ item.keyword }}</text>
				</view>
			</view>
		</view>
		<!-- 推荐上 -->
		<view class="main" v-if="dataList.length <= 0">
			<view  class="s-header row">
				<text class="tit">商品推荐</text>
			</view>
			<view class="rows">
				<view class="row1" v-for="(item,index) in 2" :key="index">
					<view class="image">
						<image class="img" src="../../static/shop/1595657049599668876.jpg" mode=""></image>
					</view>
					<view class="text">
						<view class="tit">
							蓝月亮洗衣液
						</view>
						<view class="money">
							￥65.2
						</view>
					</view>
				</view>
			</view>
		</view>
		
	<!-- 搜索结果 -->
			<shop-list  v-if="dataList.length > 0"></shop-list>
	</view>
</template>

<script>

import shopList from '../../components/shopList/shopList.vue'
	export default {
		components:{
			shopList
		},
	data(){
		return {
			keyword:"",
			historyList:[],
			hotList:[],
			dataList:[],//搜索结果
		}
	},
	onShow(){
		this.historyList = uni.getStorageSync("historyList") || [];
		this.$u.get('/search/hotSearch').then(res =>{
			console.log(res)
		}).catch((e) => {})
	},
	methods:{
		back(){
			uni.navigateTo({
				url:'/Shop/index/index'
			})
		},
		async getData(){
		
		},
		async search(val){
		
			if(typeof val == "string"){
					console.log(val)
				this.keyword= val
			}else{
				let historyList = uni.getStorageSync("historyList") || [];
				if(!historyList.includes(this.keyword)){
					historyList.unshift(this.keyword)
					uni.setStorageSync("historyList",historyList)
					this.historyList = historyList;
				}
			}
			uni.navigateTo({
				url:'./result'
			})
			
		},
		clearInput(){
			this.keyword = ""
		},
		showPopup(){
			uni.showModal({
				title:'确认删除全部历史路径？',
				success:(res)=>{
					if(res.confirm){
						this.confirm()
					}else{
						console.log('失败');
					}
				},
				
			})
		},
		 close(done){
			// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 done 才会关闭对话框
			// ...
			done()
		},
		confirm(done,value){
			uni.removeStorageSync("historyList")
			this.historyList = []
			this.keyword = ""
			
		}
	}
}
</script>

<style scoped lang='scss'>
	.search-wrap{
		padding-left: 24rpx;
		height: 100rpx;
		
		.icon-sousuo{
			padding: 0 12rpx 0 20rpx;
			font-size: 40rpx;
			color: #999;
		}
		.input-box {
			width: 604rpx;
			height: 80rpx;
			border-radius: 100rpx;
			background: #f5f6f7;
		}
		.input{
			flex: 1;
			font-size: 30rpx;
			color: #333;
		}
		.icon-guanbi2{
			padding: 10rpx 20rpx;
			font-size: 32rpx;
			color: #999;
		}
		.search-btn {
			padding: 10rpx 20rpx;
			background-color:#FF9500  ;
			flex-shrink: 0;
			font-size: 32rpx;
		}
	}
	.content {
		flex: 1;
		padding-top: 24rpx;
		border-radius: 28rpx 28rpx 0 0;
		background-color: #fff;
		
	}
	.s-header{
		height: 80rpx;
		padding: 0 32rpx 0 40rpx;
		
		.tit{
			flex: 1;
			font-size: 30rpx;
			color: #333;
			font-weight: 700;
		}
		.icon-lajitong{
			padding: 10rpx;
			font-size: 36rpx;
			color: #333;
		}
	}
	.list{
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0 0 36rpx;
		
		.item{
			min-width: 60rpx;
			height: 58rpx;
			padding: 0 24rpx;
			margin: 0 24rpx 24rpx 0;
			border-radius: 100rpx;
			background-color: #f5f6f7;
			font-size: 26rpx;
			color: #666;
		}
	}
	.main{
		padding-top: 10rpx;
		background-color: #FFFFFF;
		.head {
			width: 90%;
			margin: 30rpx auto;
			display: flex;
		}
		.rows {
			width: 95%;
			margin: auto;
			display: flex;
			justify-content: space-around;
			flex-wrap: wrap;
	
			.row1{
				width: 40%;
				
				.image{
					width: 100%;
					height: 200rpx;
					border-radius: 15rpx 15rpx 0 0;
					image{
						border-radius: 15rpx 15rpx 0 0;
					}
				}
				.text{
					margin: 0;
					height: 90rpx;
					margin-bottom: 20rpx;
					background-color: #fff;
					.tit{
						padding: 10rpx 0 0 20rpx;
						font-size: 24rpx;
					}
					.money{
						color: rgba(247, 18, 5, 100);
						margin-left: 30rpx;
						margin-top: 5rpx;
						font-size: 24rpx;
						
					}
				}
			}
		}
		}
</style>
